//定位
.relative {
  position: relative;
}

.fixed {
  position: fixed;
}

.abs {
  position: absolute;

  &.t {
    top: 0;
  }

  &.l {
    left: 0;
  }

  &.r {
    right: 0;
  }

  &.b {
    bottom: 0;
  }
}
.absCenter{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

// flex布局
.flexMode {
  display: flex !important;
  justify-content: flex-start;
  align-items: flex-start;
}

.flexV {
  flex-direction: column;
}

.flexV-1 {
  flex-direction: column-reverse;
}

.flexWrap {
  flex-wrap: wrap;
}

.flexWrap-1 {
  flex-wrap: wrap-reverse;
}

.flexGrow {
  flex-grow: 1;
}

.noShrink {
  flex-shrink: 0;
}

.hl {
  justify-content: flex-start;
}

.hb {
  justify-content: space-between;
}

.ha {
  justify-content: space-around;
}

.hc {
  justify-content: center;
}

.hr {
  justify-content: flex-end;
}

.vl {
  align-items: flex-start;
}

.vr {
  align-items: flex-end;
}

.vc {
  align-items: center;
}

.vs {
  align-items: stretch;
}

//grid布局
.gridMode {
  display: grid !important;
}

.gc2 {
  grid-template-columns: repeat(2, 50%);
}

.gc3 {
  grid-template-columns: repeat(3, calc(100% / 3));
}

.gc4 {
  grid-template-columns: repeat(4, 25%);
}

.gc5 {
  grid-template-columns: repeat(5, 20%);
}

.garea9 {
  grid-template-areas: 'lt t rt'
    'l c r'
    'lb b rb';
}

.sticky {
  position: sticky;
  top: 0;
}

.clear {
  clear: both;
}

//行内对齐
.txt-c {
  text-align: center;
}

.txt-r {
  text-align: right;
}